<template>
  <view class="label-demo-page">
    <!-- 页面标题 -->
    <view class="page-title">label标签用法演示</view>

    <!-- 1. label + 复选框（最常用场景） -->
    <view class="demo-section">
      <view class="section-title">1. 搭配复选框（点文字选框）</view>
      <view class="section-content">
        <!-- checkbox-group：管理一组复选框 -->
        <checkbox-group v-model="checkedFruits">
          <!-- label包裹：点击文字/图标都能切换复选框 -->
          <label class="checkbox-item" v-for="(fruit, index) in fruitList" :key="index">
            <checkbox :value="fruit" />
            <text class="item-text">{{ fruit }}</text>
          </label>
        </checkbox-group>
        <!-- 显示选中结果 -->
        <view class="result-tip">已选中：{{ checkedFruits.length > 0 ? checkedFruits.join('、') : '无' }}</view>
      </view>
    </view>

    <!-- 2. label + 单选框 -->
    <view class="demo-section">
      <view class="section-title">2. 搭配单选框（点文字选按钮）</view>
      <view class="section-content">
        <!-- radio-group：管理一组单选框（互斥选择） -->
        <radio-group v-model="selectedGender">
          <label class="radio-item" v-for="(gender, index) in genderList" :key="index">
            <radio :value="gender.value" />
            <text class="item-text">{{ gender.label }}</text>
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 3. label + 输入框（点文字聚焦输入） -->
    <view class="demo-section">
      <view class="section-title">3. 搭配输入框（点文字聚焦）</view>
      <view class="section-content input-wrap">
        <!-- for属性：关联input的id，点击label文字聚焦输入框 -->
        <label for="username" class="input-label">用户名：</label>
        <input 
          id="username" 
          class="input-field" 
          placeholder="点击“用户名：”文字试试" 
          v-model="username"
        />

        <label for="phone" class="input-label">手机号：</label>
        <input 
          id="phone" 
          class="input-field" 
          type="number" 
          placeholder="点击“手机号：”文字试试" 
          v-model="phone"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 1. 复选框数据
      fruitList: ['苹果', '香蕉', '橙子', '草莓'], // 选项列表
      checkedFruits: [], // 选中的复选框值（数组）

      // 2. 单选框数据
      genderList: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '保密', value: 'secret' }
      ],
      selectedGender: 'secret', // 默认选中“保密”

      // 3. 输入框数据
      username: '',
      phone: ''
    };
  },
  onLoad() {
    // 设置导航栏标题
    uni.setNavigationBarTitle({ title: 'label标签演示' });
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.label-demo-page {
  padding: 20rpx;
  background-color: #f5f5f7;
  min-height: 100vh;
}

/* 标题样式 */
.page-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

/* 每个演示区块样式 */
.demo-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  margin-bottom: 25rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 区块标题 */
.section-title {
  font-size: 26rpx;
  color: #1d1d1f;
  margin-bottom: 20rpx;
  border-left: 6rpx solid #007AFF;
  padding-left: 15rpx;
}

/* 区块内容容器 */
.section-content {
  padding: 0 10rpx;
}

/* 1. 复选框项样式 */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 15rpx; /* 复选框与文字间距 */
  font-size: 24rpx;
  color: #333;
  margin-bottom: 25rpx;
}
.checkbox-item:last-child {
  margin-bottom: 0;
}

/* 2. 单选框项样式 */
.radio-item {
  display: flex;
  align-items: center;
  gap: 15rpx;
  font-size: 24rpx;
  color: #333;
  margin-right: 40rpx; /* 单选框之间的间距 */
}

/* 选项文字样式 */
.item-text {
  cursor: pointer; /* 鼠标悬浮显示“手型”，提示可点击 */
}

/* 选中结果提示 */
.result-tip {
  margin-top: 20rpx;
  font-size: 22rpx;
  color: #666;
}

/* 3. 输入框区域样式 */
.input-wrap {
  display: flex;
  flex-direction: column;
  gap: 30rpx; /* 两个输入框之间的间距 */
}
.input-label {
  font-size: 24rpx;
  color: #333;
  width: 180rpx; /* 固定标签宽度，对齐输入框 */
  cursor: pointer;
}
.input-field {
  flex: 1; /* 输入框占满剩余宽度 */
  height: 70rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 24rpx;
}
</style>